<vg-player (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play></vg-overlay-play>

    <vg-controls *ngIf="!controls" [vgAutohide]="true" [vgAutohideTime]="1.5">
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

        <vg-mute></vg-mute>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video #media [vgMedia]="media" id="singleVideo" preload="auto" [controls]="controls" crossorigin>
        <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">
    </video>
</vg-player>

<div style="height: 100px;">
    <div>
        <button type="button" (click)="api.play()">Play</button>
        <button type="button" (click)="api.pause()">Pause</button>
        <button type="button" (click)="api.currentTime = 50">Seek to second 50</button>
        <button type="button" (click)="onClickUpdateSource()">Update source</button>
    </div>
    <div>
        <label for="nativeControls">Native Controls</label>
        <input #nativeControls id="nativeControls" type="checkbox" (change)="controls = nativeControls.checked">
    </div>
    <div>
        <label for="nativeFullscreen">Native Fullscreen</label>
        <input #nativeFullscreen id="nativeFullscreen" type="checkbox" [(ngModel)]="nativeFs" (change)="onChangeNativeFs($event)">
    </div>
    <div>
        <label>{{ 'Current time: ' + api?.time?.current}}</label>
    </div>
</div>
